<template>
    <div>
        {{ student.name }}-{{ student.age }}-{{ student.gender }}
        <span v-for="item in student.likes" :key="item">
            ~{{ item }}~
        </span>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue';

let student = ref({
    name: '张三',
    age: 23,
    gender: '男',
    likes: []
});

watch(
    () => student.value.likes,
    (newValue, oldValue) => {
        console.log(newValue);
        console.log(oldValue);
    });

setTimeout(() => {
    student.value.likes = ['唱歌', '跳舞', '睡觉'];
}, 2000);
</script>

<!-- <script setup>
import { ref, watch } from 'vue';

let student = ref({
    name: '张三',
    age: 23,
    gender: '男',
    likes: []
});

watch(student.value.likes, (newValue, oldValue) => {
    console.log(newValue);
    console.log(oldValue);
});

setTimeout(() => {
    student.value.likes = ['唱歌', '跳舞', '睡觉'];
}, 2000);
</script> -->